<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章列表--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!--树形样式-->
    <link rel="stylesheet" href="/public/plugin/zTree/css/demo.css" media="all" >
    <link rel="stylesheet" href="/public/plugin/zTree/css/metroStyle/metroStyle.css" type="text/css">
    <link rel="stylesheet" href="/public/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/public/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<div>
    <video autoplay id="sourcevid" style="width:900px;height:300px"></video>
    <canvas id="output" style="display:none"></canvas>
</div>
<div>
    <img id="receiver" s
         tyle="width:300px;height:300px"/>
</div>
</body>
<script type="text/javascript" charset="utf-8">
    //创建一个+实例
    var socket = new WebSocket("ws://192.168.0.115:8002/tu/webSocket/123");
    var back = document.getElementById('output');
    //返回一个用于在画布上绘图的环境。
    var backcontext = back.getContext('2d');
    var video = document.getElementsByTagName('video')[0];
    var success = function(stream){
        //获取视屏流，转换为url
        video.src = window.URL.createObjectURL(stream);
    };
    //打开socket
    socket.onopen = function(){
        draw();
        console.log("open success")
    };
    // 将视频帧绘制到Canvas对象上,Canvas每100ms切换帧，形成肉眼视频效果
    var draw = function(){
        try{
            backcontext.drawImage(video,0,0, back.width, back.height);
        }catch(e){
            if (e.name == "NS_ERROR_NOT_AVAILABLE") {
                return setTimeout(draw, 100);
            } else {
                throw e;
            }
        }
        if(video.src){
            // Canvas的内容转化成PNG data URI并发送到服务器，0.5为和压缩系数
            socket.send(back.toDataURL("image/jpeg", 0.52));
        }
        setTimeout(draw, 100);
    };
    //调用设备的摄像头,并将资源放入video标签
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;
    navigator.getUserMedia({video:true, audio:false}, success, console.log);

</script>
<script type="text/javascript" charset="utf-8">
    //创建一个socket实例
    var receiver_socket = new WebSocket("ws://192.168.0.115:8002/tu/webSocket/245");
    var image = document.getElementById('receiver');
    // 监听消息
    receiver_socket.onmessage = function(data)
    {
        image.src=data.data;
    }
</script>
</html>